<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width:400px;height: 300px;margin: 10px auto;border: solid 1px black;}
    .cont ul{margin: 0;padding: 0;list-style: none;display: flex;width: 400px;height: 30px;line-height: 30px;text-align: center;background: #ccc;}
    .cont ul li{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;}
    .cont ul li.active{background: red;color: #fff;}

    .cont .box>div{width: 400px;height: 270px;display: none;font-size: 50px;}
    .cont .box .msg1{background: #399;display: block;}
    .cont .box .msg2{background: #393;}
    .cont .box .msg3{background: #993;}
    .cont .box .msg4{background: #939;}

    ul,li{margin: 0;padding: 0;list-style: none;}
    .nav{width: 100%;height: 40px;line-height: 40px;display: flex;text-align: center;background: #eee;}
    .nav>li{flex: 1;border-left: solid 1px #fff;border-right: solid 1px #fff}
    .nav>li>ul{background:#ccc;display: none;}
    .nav>li>ul>li{position: relative;}
    .nav>li>ul ul{position: absolute;width: 140px;right: -140px;top:0;background: #ddd;display: none;}

    .nav li:hover{background: red;}

    .nav>li:last-child ul ul{left:-140px}

  </style>
</head>
<body>
  <div class="cont">
    <ul>
      <li class="active">选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
    </ul>
    <div class="box">
      <div class="msg1">选项1的内容</div>
      <div class="msg2">hello world</div>
      <div class="msg3">哈哈哈</div>
      <div class="msg4">嘿嘿嘿</div>
    </div>
  </div>

  <ul class="nav">
    <li>
      <span>一级菜单</span>
      <ul>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span>一级菜单</span>
      <ul>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span>一级菜单</span>
      <ul>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
        <li>
          <span>二级菜单</span>
          <ul>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
            <li>三级菜单</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>
<script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
<script>
  
  $("<span>").appendTo($("body")).html("按钮").css({
    display:"block",
    width:100,
    height:30,
    background:"red",
    textAlign:"center",
    lineHeight:"30px"
  }).on("click",function(){
    console.log(this)
  })

  // const p = document.createElement("p")
  // document.body.appendChild(p);
  // p.innerHTML = "段落"
  // p.style.cssText = "width:100px;height:30px;background:red";
  // p.addEventListener("click", function(){
  //   console.log(this)
  // })

  
  $(".cont li").on("click", function(){
    $(this).addClass("active").siblings().removeClass("active");

    $(".box>div").eq($(this).index()).css("display", "block").siblings().css("display","none");
  })


  $(".nav li").hover(function(){
    $(this).children("ul").slideDown(300);
  }, function(){
    $(this).children("ul").slideUp(300);
  })

  // const lis = document.querySelectorAll("li")
  // for(let i=0;i<lis.length;i++){
  //   lis[i].onmouseover = function(){
  //     for(let j=0;j<this.children.length;j++){
  //       if(this.children[j].tagName === "UL"){
  //         this.children[j].style.display = "block";
  //       }
  //     }
  //   }
  //   lis[i].onmouseout = function(){
  //     for(let j=0;j<this.children.length;j++){
  //       if(this.children[j].tagName === "UL"){
  //         this.children[j].style.display = "none";
  //       }
  //     }
  //   }
  // }

</script>
</html>